<template>
  <div class="index">
    <Banner></Banner>
    <Row class="floor">
      <Col span="24">
        <div class="title">
          <img src="../assets/images/index/title-1.jpg" alt srcset>
        </div>
        <div id="certify">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="../assets/images/certify01.png">
              </div>
              <div class="swiper-slide">
                <img src="../assets/images/certify02.png">
              </div>
              <div class="swiper-slide">
                <img src="../assets/images/certify03.png">
              </div>
              <div class="swiper-slide">
                <img src="../assets/images/certify04.png">
              </div>
              <div class="swiper-slide">
                <img src="../assets/images/certify05.png">
              </div>
            </div>
          </div>
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
      </Col>
    </Row>
    <Row class="floor">
      <Col span="24">
        <div class="title">
          <img src="../assets/images/index/title-2.jpg" alt srcset>
        </div>
        <Row class="kcContent" :gutter="32">
          <Col :lg="6">
            <Card :bordered="false" style="background:#00A2E9">
              <div style="text-align:center">
                <img src="../assets/images/index/floorTitle-1.png" alt srcset>
                <p class="SimSun">降低商业门槛
                  <br>与T11一起迎战风口市场
                </p>
              </div>
            </Card>
          </Col>
          <Col :lg="6">
            <Card :bordered="false" style="background:#FFF000">
              <div style="text-align:center">
                <img src="../assets/images/index/floorTitle-2.png" alt srcset>
                <p class="SimSun">拎包教学，减轻负担
                  <br>专业的事交给专业的人
                </p>
              </div>
            </Card>
          </Col>
          <Col :lg="6">
            <Card :bordered="false" style="background:#F4B3B3">
              <div style="text-align:center">
                <img src="../assets/images/index/floorTitle-3.png" alt srcset>
                <p class="SimSun">50名专业课程老师
                  <br>源源不断的生源输送
                </p>
              </div>
            </Card>
          </Col>
          <Col :lg="6">
            <Card :bordered="false" style="background:#A79CCB">
              <div style="text-align:center">
                <img src="../assets/images/index/floorTitle-4.png" alt srcset>
                <p class="SimSun">共享经济时代
                  <br>花更少的钱办更多的事
                </p>
              </div>
            </Card>
          </Col>
        </Row>
        <!-- 中心导航 -->
        <div style="margin-bottom:100px;">
          <Row class="zhtMenu">
            <Col :lg="24" class="zhtMenuWap">
              <div class="item">
                <div class="icon">
                  <img src="../assets/images/index/icon-6.png" alt>
                </div>
              </div>
              <div class="item">
                <div class="icon">
                  <img src="../assets/images/index/icon-1.png" alt>
                </div>
              </div>
              <div class="item">
                <div class="icon">
                  <img src="../assets/images/index/icon-2.png" alt>
                </div>
              </div>
              <div class="item">
                <div class="icon">
                  <img src="../assets/images/index/icon-5.png" alt>
                </div>
              </div>
              <div class="item">
                <div class="icon">
                  <img src="../assets/images/index/icon-4.png" alt>
                </div>
              </div>
              <div class="item">
                <div class="icon">
                  <img src="../assets/images/index/icon-3.png" alt>
                </div>
              </div>
            </Col>
          </Row>
        </div>
        <!-- 艺术分类 -->
        <Row class="ysfl">
          <Col :lg="8">
            <img src="../assets/images/index/ysfl.png" alt>
          </Col>
          <Col :lg="16">
            <div>
              <p class="fS55 clor129">
                美术类――
                <span>美术、毛笔书法、硬笔书法、中国画</span>
              </p>
              <p class="fS55 clor519">
                语言类――
                <span>口才</span>
              </p>
              <p class="fS55 clorFB0">
                音乐类――
                <span>钢琴、爵士鼓、吉他、尤克里里</span>
              </p>
              <p class="fS55 clor2E9">
                舞蹈类――
                <span>中国舞、拉丁舞、街舞、模特</span>
              </p>
              <p class="fS55 clor776">
                科学类――
                <span>机器人</span>
              </p>
              <p class="fS55 clorB87">
                体育类――
                <span>篮球、跆拳道、瑜伽</span>
              </p>
            </div>
          </Col>
        </Row>
      </Col>
    </Row>
    <Row class="floor bg">
      <Col span="24">
        <div class="title" id="hov">
          <img src="../assets/images/index/title-3.png" alt srcset>
        </div>
        <div class="gwContent">
          <div class="gwTop">
            <div v-for="item in counselor" :key="item.title">
              <img :src="item.src" alt srcset>
              
              <span>{{item.title}}</span>

              <div class="other">{{item.other}}</div>
            </div>
          </div>
          <Row class="gwBottom">
            <Col :lg="{span:11}" :xs="{span:24}" style="overflow: hidden">
              <Card :bordered="false">
                <Row type="flex" align="middle" :gutter="16">
                  <Col span="8">
                    <img src="../assets/images/index/24.png" alt srcset>
                  </Col>
                  <Col span="11">
                    <p style="font-size:30px;font-weight:bold">魏老师</p>
                    <p>
                      艺术中心艺术中心艺术中心艺术
                      中心艺术中心艺术中心艺术中心
                      艺术中心艺术中心艺术中心艺术
                      中心艺术中心艺术中心艺术中心
                      艺术中心艺术中心艺术中心艺术
                      中心艺术中心
                    </p>
                  </Col>
                  <Col span="5">
                    <Button type="error" size="small">查看详情</Button>
                  </Col>
                </Row>
              </Card>
            </Col>
            <Col :lg="{span:11,offset:2}" :xs="{span:24}" style="overflow: hidden">
              <Card :bordered="false">
                <Row type="flex" align="middle" :gutter="16">
                  <Col span="8">
                    <img src="../assets/images/index/25.png" alt srcset>
                  </Col>
                  <Col span="11">
                    <p style="font-size:30px;font-weight:bold">魏老师</p>
                    <p>
                      艺术中心艺术中心艺术中心艺术
                      中心艺术中心艺术中心艺术中心
                      艺术中心艺术中心艺术中心艺术
                      中心艺术中心艺术中心艺术中心
                      艺术中心艺术中心艺术中心艺术
                      中心艺术中心
                    </p>
                  </Col>
                  <Col span="5" style="text-align:center">
                    <Button type="error" size="small">查看详情</Button>
                  </Col>
                </Row>
              </Card>
            </Col>
          </Row>
        </div>
      </Col>
    </Row>
    <Row class="floorW" :gutter="32">
      <Col :lg="12">
        <Card :bordered="false">
          <p slot="title" class="YaHei" style="text-align:center;font-size:30px">T11风采</p>
          <div class="content">
            <img src="../assets/images/index/fc.jpg" alt srcset>
            <p class="fS21 clorfff">关于我们</p>
          </div>
        </Card>
      </Col>
      <Col :lg="12">
        <Card :bordered="false">
          <p slot="title" class="YaHei" style="text-align:center;font-size:30px">T11咨询</p>
          <div class="content">
            <img src="../assets/images/index/zx.jpg" alt srcset>
            <p class="fS21 clorfff">华艺舞校</p>
          </div>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import Swiper from "../assets/js/swiper.min.js";
import shutter from "../assets/js/shutter";

export default {
  data() {
    return {
      active: false,
      items: [
        {
          src: require("../assets/images/index/07.png"),
          title: "乐维童画"
        },
        {
          src: require("../assets/images/index/08.png"),
          title: "领越科教"
        },
        {
          src: require("../assets/images/index/09.png"),
          title: "卓艺书画"
        }
      ],
      items1: [
        {
          src: require("../assets/images/index/10.png"),
          title: "紫竹瑜伽"
        },
        {
          src: require("../assets/images/index/11.png"),
          title: "唯乐钢琴"
        },
        {
          src: require("../assets/images/index/12.png"),
          title: "N 街舞"
        }
      ],
      /* 顾问 */
      counselor: [
        {
          src: require("../assets/images/index/14.png"),
          title: "魏老师",
          other: "向TA咨询"
        },
        {
          src: require("../assets/images/index/15.png"),
          title: "白老师",
          other: "向TA咨询"
        },
        {
          src: require("../assets/images/index/16.png"),
          title: "刘老师",
          other: "向TA咨询"
        },
        {
          src: require("../assets/images/index/17.png"),
          title: "任老师",
          other: "向TA咨询"
        },
        {
          src: require("../assets/images/index/18.png"),
          title: "王老师",
          other: "向TA咨询"
        }
      ]
    };
  },
  mounted() {
    console.log(shutter)
    const certifySwiper = new Swiper(".swiper-container", {
      watchSlidesProgress: true,
      slidesPerView: "auto",
      centeredSlides: true,
      loop: true,
      loopedSlides: 5,
      // autoplay: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      },
      on: {
        progress: function(progress) {
          for (let i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i);
            var slideProgress = this.slides[i].progress;
            var modify = 1;
            if (Math.abs(slideProgress) > 1) {
              modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
            }
            var translate = slideProgress * modify * 260 + "px";
            var scale = 1 - Math.abs(slideProgress) / 5;
            var zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
            slide.transform(
              "translateX(" + translate + ") scale(" + scale + ")"
            );
            slide.css("zIndex", zIndex);
            slide.css("opacity", 1);
            if (Math.abs(slideProgress) > 3) {
              slide.css("opacity", 0);
            }
          }
        },
        setTransition: function(transition) {
          for (var i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i);
            slide.transition(transition);
          }
        }
      }
    });
  },
  destroyed() {},
  methods: {}
};
</script>

<style lang="less">
.bg {
  background: url("../assets/images/index/bg.jpg") no-repeat;
  background-size: 100% 100%;
}
.index {
  background: #fff;
  .floor {
    padding: 60px 0;

    .title {
      position: relative;
      text-align: center;
      font-size: 58px;
      color: #342c2a;
      margin-bottom: 60px;
      p {
        font-size: 40px;
      }
    }
    .title:after {
      position: absolute;
      content: "";
      left: 0;
      bottom: 55%;
      width: 37%;
      height: 3px;
      background: #342c2a;
    }
    .title:before {
      position: absolute;
      content: "";
      right: 0;
      bottom: 55%;
      width: 37%;
      height: 3px;
      background: #342c2a;
    }
    .ivu-col {
      /* 优质课程 */
      .kcContent {
        width: 1200px;
        margin: auto;
        padding-bottom: 150px;

        .ivu-card-body {
          height: 180px;
          p {
            padding-top: 30px;
            line-height: 27px;
          }
        }
      }

      /* 课程顾问 */
      .gwContent {
        width: 1200px;
        margin: auto;

        .gwTop {
          display: flex;
          justify-content: space-around;
          flex-wrap: nowrap;
          margin-bottom: 40px;

          div {
            text-align: center;
            position: relative;
            span {
              font-size: 30px;
              font-weight: bold;
            }
            .other {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              margin: auto;
              font-size: 30px;
              text-align: center;
              color: #fff;
              width: 227px;
              height: 227px;
              background: rgba(0, 0, 0, 0.4);
              border-radius: 50%;
              line-height: 227px;
              display: none;
            }
          }
          div:hover .other {
            display: block;
          }
        }
        .gwBottom {
          .ivu-card-body {
            padding: 0;
            .ivu-col {
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
      /* 中心导航 */
      .zhtMenu {
        width: 743px;
        height: 734px;
        background: url("../assets/images/index/zhtMenuBg.png") no-repeat 100%
          100%;

        .zhtMenuWap {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-between;
          flex-flow: wrap;
          .item {
            width: 230px;
            height: 230px;
            border-radius: 50%;
            transform: scale(1);
            display: flex;
            justify-content: center;
            align-items: center;

            .icon {
              width: 80%;
              height: 80%;
              background: #fff;
              border-radius: 50%;
              text-align: center;
              box-shadow: 10px 10px 50px 2px #888888;
              img {
                position: relative;
                top: 50%;
                margin-top: -53px;
              }
            }
          }
          .item:nth-child(1) {
            background: #e62129;
            position: relative;
            top: 96px;
            left: -40px;
          }
          .item:nth-child(2) {
            background: #fff000;
            position: relative;
            top: -86px;
            left: -15px;
          }
          .item:nth-child(3) {
            background: #008fd7;
            position: relative;
            top: 70px;
            right: -27px;
          }
          .item:nth-child(4) {
            background: #f08519;
            position: relative;
            top: 61px;
            left: -25px;
          }
          .item:nth-child(5) {
            background: #7c6fb0;
            position: relative;
            bottom: -220px;
            left: 10px;
          }
          .item:nth-child(6) {
            background: #5ba997;
            position: relative;
            top: 42px;
            left: 40px;
          }
          .item:hover {
            transform: scale(1.1);
          }
        }
      }
      /* 艺术分类 */
      .ysfl {
        padding-top: 65px;
        width: 1200px;
        margin: auto;
        .ivu-col {
          img {
            margin: 30px 0;
            width: 100%;
          }
          p {
            line-height: 85px;
            margin-bottom: 20px;
            span {
              font-size: 28px;
              vertical-align: top;
              color: initial;
            }
          }
        }
      }
      /* 合作伙伴 */
      /* 入学流程 */
      .lcContent,
      .hbContent {
        width: 1200px;
        margin: auto;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .content {
    position: relative;
    p {
      position: absolute;
      bottom: 5px;
      left: 0;
      right: 0;
      margin: auto;
      background: rgba(0, 0, 0, 0.7);
    }
  }
  .floorW {
    padding: 60px 0;
    width: 1200px;
    margin: auto;
    img {
      width: 100%;
    }
    .ivu-card-head {
      p {
        height: auto;
        line-height: initial;
      }
    }
    .ivu-card-body {
      padding: 0;
    }
  }
}
</style>